<template>
  <div v-loading="loading" class="await_box">
    <div class="leftTent">
      <div style="
          display: flex;
          align-items: center;
          padding-bottom: 10px;
          border-bottom: 1px solid #eaeaea;
        ">
        <el-select v-model="queryParams.templateId" @change="searchList"  placeholder="请选择" style="flex: 1; margin-right: 10px; margin-left: 15px">
          <el-option v-for="item in optionsList" :key="item.id" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
        <el-popover placement="bottom-end" v-model="visible" width="350" trigger="click">
          <div>
            <el-form :model="queryParams" ref="queryForm" label-width="70px">
              <el-form-item label="班组" prop="teamId">
                <el-select    v-model="queryParams.teamId" placeholder="请输入班组">
                  <el-option v-for="dict in teamsList" :key="dict.id" :value="dict.id" :label="dict.name" />
                </el-select>
              </el-form-item>
              <el-form-item label="发起日期" prop="grade">
                <el-date-picker type="daterange" style="width: 100%" @change="getPicker" v-model="pickerValue" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="通知日期" prop="grade">
                <el-date-picker type="daterange" style="width: 100%" @change="getPicker1" v-model="pickerValue1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label-width="0">
                <div style="display: flex; justify-content: space-between">
                  <el-button @click="changeForm" type="text">清除筛选条件</el-button>
                  <div>
                    <el-button style="margin: 0 5px" @click="visible = false" >取消</el-button>
                    <el-button type="primary" style="margin: 0 5px" :loading="loading"  icon="el-icon-search" @click="openSearch">查询</el-button>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-button slot="reference" type="text" style="padding-right: 15px">更多筛选<i class="el-icon-s-operation"></i></el-button>
        </el-popover>
      </div>
      <div style="height: calc(100% - 35px); transform: translate(0)">
        <div style="height: 100%" ref="scroll" @scroll.passive="getScroll($event)">
          <!-- 回到顶部 -->
          <transition name="fade">
            <div v-show="scrollSta" @click="cScroll" class="scrollDown">
              <i class="el-icon-caret-top"></i>
            </div>
          </transition>
          <load-more :pageNum.sync="queryParams.pageNum" :pages="pages" :disabled.sync="disabled" @changeData="getList">
            <audit-list @change="checkItem" :dataIndex="dataIndex" :tableData="tableData"></audit-list>
          </load-more>
        </div>
      </div>
    </div>
    <div class="rightTent">
      <template v-if="(dataIndex || dataIndex == 0) && tableData.length">
        <div style="height: calc(100% - 30px); overflow: auto">
          <div style="display: flex; align-items: center">
            <div style="margin-right: 10px">
              <span style="font-weight: 700;font-size: 14px;">{{ auditList.name }}</span>
            </div>
            <div class="text_store" :class="getCurrent(auditList.status).typeBut">
              {{ getTitle(auditList.status) }}
            </div>
          </div>
          <!-- {{auditList}} -->
          <div style="margin-top: 10px">
            <div style="display: flex; align-items: center">
              <template v-if="auditList.headPortraitPath">
                <el-image fit="cover" class="tent_image2" :src="$config.imgUrl+auditList.headPortraitPath" :preview-src-list="[$config.imgUrl+auditList.headPortraitPath]">
                </el-image>
              </template>
              <img v-else class="tent_image2" src="@/assets/images/morenImg.png">
              <span style="font-size: 14px; margin-left: 10px;">{{ auditList.cuser }}</span>
            </div>
          </div>
          <el-tabs v-model="activeName" style="margin-top: 5px">
            <el-tab-pane label="基本资料" name="0">
              <essential-item :auditList="auditList"></essential-item>
              <!-- 项目立项申请单 -->
            </el-tab-pane>
            <el-tab-pane label="审批信息" name="1">
              <div style="display: flex">
                <div>
                  <audit :rowTaskId="rowTaskId" />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="but_style">
          <el-button type="danger" class="but_err" :loading="loading"  @click="reject">拒绝</el-button>
          <el-button type="primary" style="margin: 0 5px"  :loading="loading" @click="addFrom">同意</el-button>
        </div>
      </template>
      <template v-else>
        <div style="text-align: center">
          <img src="@/assets/images/helpKong.png" alt="" />
          <p style="margin: 20px; font-size: 18px; color: #ccc">暂无数据</p>
        </div>
      </template>
    </div>
    <hu-drawer title="同意" :open.sync="open1" :loading="loading" @submit="commit1">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item label="审批意见" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入审批意见" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
    <hu-drawer title="拒绝" :open.sync="open2" :loading="loading" @submit="commit2">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item label="拒绝原因" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入拒绝原因" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>
<script>
// 上滑加载更多
import LoadMore from "@/components/LoadMore/LoadMore";
import * as http from "@/api/audit/examine/await.js";
import Audit from "../../components/audit/audit.vue";
import auditList from "./components/auditList.vue";
import essentialItem from "@/views/components/audit/essentialItem.vue";
export default {
  components: {
    Audit,
    auditList,
    essentialItem,
    LoadMore
  },
  name: "AuditExamineAwait",
  computed: {
    parameters() {
      return this.$store.getters.parameters;
    },
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
            icon: "el-icon-more",
            color: { color: " #496dff" },
            bgc: { "background-color": "#5a8bff" },
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
            icon: "el-icon-check",
            color: { color: " #39ce78" },
            bgc: { "background-color": "#39ce78" },
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
            icon: "el-icon-close",
            color: { color: " #fe5a57" },
            bgc: { "background-color": "#fe5a57" },
          };
        } else {
          return {};
        }
      };
    },
    // 审批状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
  },
  data() {
    return {
      optionsList: [],
      open1: false,
      open2: false,
      dataIndex: undefined,
      casProps: {
        value: "id",
        label: "title",
        children: "children",
      },
      activeName: "0",
      disabled: false,
      visible: false,
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pages: 1,
      total: 0, // table total
      tableData: [], // table Data
      pickerValue: undefined, // 时间
      pickerValue1: undefined, // 时间
      formChart: {
        isSiteSupervision: 2,
      },
      title: undefined,
      time: null,
      scrollSta: false,
      auditList: {},
      detailsList: {},
      rowTaskId: null,
      teamsList: [],
    };
  },
  created() {
    this.getList();
    this.getTeams();
    this.modeuleList();
  },
  methods: {
    // 班组
    getTeams() {
      this.$http.getTeams().then(({ result }) => {
        this.teamsList = result;
      });
    },
    modeuleList() {
      http.modeuleList().then(({ result }) => {
        this.optionsList = result.records;
      });
    },
    // 选择某一项
    checkItem(row) {
      this.rowTaskId = row[0].id;
      this.auditList = row[0];
      this.dataIndex = row[1];
    },
    cScroll() {
      this.scrollSta = false;
      this.$refs.scroll.scrollTop = 0;
    },
    getScroll(event) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        // 滚动条距离底部的距离
        if (event.target.scrollTop > 1500) {
          //  操作
          this.scrollSta = true;
        } else {
          this.scrollSta = false;
        }
      }, 100);
    },
    changeForm() {
      this.queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      this.pickerValue = undefined;
      this.pickerValue1 = undefined;
    },
    // 列表 List
    getList() {
      this.loading = true;
      const params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData.push(...result.records);
          this.pages = result.pages;
          this.total = result.total;
          if (!this.tableData.length) {
            this.disabled = true;
          }
          // 默认选择第一个
          if (this.tableData.length && this.queryParams.pageNum === 1) {
            this.rowTaskId = undefined;
            this.$nextTick(() => {
              this.checkItem([this.tableData[0], 0]);
            });
          }
        }
      });
    },
    openSearch() {
      this.visible = false;
      this.searchList();
    },
    // 查询 list
    searchList() {
      this.cScroll();
      this.queryParams.pageNum = 1;
      this.disabled = false;
      this.tableData = [];
      this.getList();
    },
    resetMajor() {
      this.formChart = {
        isSiteSupervision: 2,
      };
    },
    // 同意
    addFrom() {
      this.resetMajor();
      this.open1 = true;
    },
    // 拒绝
    reject() {
      this.resetMajor();
      this.open2 = true;
    },
    commit1() {
      this.loading = true;
      const params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.id,
      };
      http.approve(params).then((response) => {
        this.$store.dispatch("GetMessages");
        this.$modal.msgSuccess("同意审批成功");
        this.searchList();
        this.open1 = false;
      });
    },
    commit2() {
      this.loading = true;
      const params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.id,
      };
      http.rejected(params).then((response) => {
        this.$store.dispatch("GetMessages");
        this.$modal.msgSuccess("拒绝审批成功");
        this.searchList();
        this.open2 = false;
      });
    },
    // 搜索时间
    getPicker(arrDate) {
      this.queryParams.startCreateDate = arrDate ? arrDate[0] : undefined;
      this.queryParams.endCreateDate = arrDate ? arrDate[1] : undefined;
    },
    // 搜索时间
    getPicker1(arrDate) {
      this.queryParams.startCarbonCopyTime = arrDate ? arrDate[0] : undefined;
      this.queryParams.endCarbonCopyTime = arrDate ? arrDate[1] : undefined;
    },
  },
};
</script>
<style lang="scss" scoped>
.await_box {
  height: calc(100vh - 120px);
  display: flex;
  .leftTent {
    flex: 0 0 350px;
    padding: 15px 0;
    background: white;
    border-radius: 3px;
    margin: 0px 15px 0px 15px;
    overflow: hidden;
  }
  .rightTent {
    width: 30%;
    flex: 1;
    background: white;
    border-radius: 3px;
    margin-right: 15px;
    padding: 24px 26px;
  }
  .but_style {
    text-align: right;
    padding-top: 10px;
    border-top: 1px solid rgb(234, 234, 234);
  }
  .but_err {
    background-color: #fe5a57;
    border: 0;
    color: #fff;
  }
  .text_store {
    width: 82px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  .scrollDown {
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.55);
    width: 40px;
    height: 40px;
    box-shadow: 0 0 6px rgba(0, 21, 41, 0.35);
    // box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    color: #496dff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    i {
      font-size: 28px;
      transition: 0.3s;
    }
  }
  .scrollDown:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 6px rgba(0, 21, 41, 0.55);
  }
  .typeBut1 {
    color: #496dff;
    background: #f5f7fc;
    border: 1px solid #5a8bff;
    &:hover {
      background: #edf1fb;
    }
  }
  .typeBut2 {
    color: #39ce78;
    background: #f5fff9;
    border: 1px solid #39ce78;
    &:hover {
      background: #e7fbee;
    }
  }
  .typeBut3 {
    color: #fe5a57;
    background: #fff3f3;
    border: 1px solid #fe5a57;
    &:hover {
      background: #fbe6e6;
    }
  }
  .select {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 6px rgba(0, 21, 41, 0.55) !important;
  }
}
.tent_image2 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
//
</style>
